@font-face {
    font-family: title font;
    src: url(Star\ Vintage.ttf);
}

@font-face {
    font-family: main font;
    src: url(Soft\ Marshmallow.woff);
}


html {
    font-family: main font;
    background-color: #000000;
    color: whitesmoke;
    text-align: center;

    background-image: url(curtains\(2\).png);
    background-position: 40% 60%;
    background-repeat: no-repeat;
    background-size: 1500px;
    background-attachment: fixed;

    padding-top: 80px;
    padding-left: 200px;
    padding-right: 200px;


}


h1 {
    font-family: title font;
    font-size: 60px;
}


a:link {
    color:whitesmoke;
    border-radius: 25px;
    background-color: #BFAAD9;
    padding: 10px ;
    text-decoration: none;
}

a:visited {
    color:whitesmoke;
}

.button {
    line-height: 9;

    position: absolute;
    bottom: 24%;
    right: 44.3%;

}



a:link:hover {
    background-color:#A080C6;
}


button[type=button], button[type=submit]{
    background-color: #BFAAD9;
    border: 2px solid #A080C6;
    border-radius: 25px;
    color: whitesmoke;
    padding: 30px, 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}


button[type=button]:hover,button[type=submit]:hover{
    background-color: #A080C6;
}

input[type=text],input[type=number]:focus {
    border: 3px solid #af04ff;

}

input[type=text],input[type=number] {
    border: 2px solid #A080C6;
    border-radius: 8px;
    margin: 4px 2px;
}

input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid whitesmoke;
}

input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #af04ff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid whitesmoke;
}

select {
    margin: 4px 2px;
    border: 2px solid #A080C6;
    border-radius: 4px;
    background-color: whitesmoke;
}

select:focus {
    margin: 4px 2px;
    border: 3px solid #af04ff;
    border-radius: 4px;
    background-color: whitesmoke;
}

/* Centered, soft orange warning */
.warning {
    background-color: #ffe5b4;          /* light orange background */
    color: #ff7201;                     /* darker orange text */
    border: 2px solid #ff7201;          /* border in dark orange */
    border-radius: 10px;                /* rounded edges */
    padding: 4px 10px;
    margin-top: 6px;
    font-size: 0.8em;
    display: none;                      /* hidden by default */
    font-weight: 500;
    width: fit-content;                 /* shrink to text */
    max-width: 80%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-left: auto;                  /* center horizontally */
    margin-right: auto;                 /* center horizontally */
    text-align: center;                 /* center text inside */
}