@font-face {
    font-family: space;
    src: url(fonts/Ethnocentric-Regular.otf);
}

@font-face {
    font-family: dune;
    src: url(fonts/Dune_Rise.otf);
}

@font-face {
    font-family: transrobotics;
    src: url(fonts/SF\ TransRobotics.ttf);
}

@font-face {
    font-family: galactic;
    src: url(fonts/GalacticBasic-rznB.ttf);
}

html {
    font-family: sans-serif;
    background: linear-gradient(90deg, rgba(125, 106, 24, 1) 0%, rgba(199, 192, 87, 1) 50%, rgba(237, 221, 83, 1) 100%);
    padding-bottom: 2rem;

}

#main {
    width: 95%;
    margin: auto;
}

h1 {
    font-family: dune;
    font-size: 5rem;
}

dl {
    font-weight: bold;
}

dt {
    font-size: 1.1rem;
    color: rgb(70, 70, 70);
}

dd {
    font-size: 1.2rem;
}

a {
    color: rgb(142, 60, 9);
    font-weight: 500;
}

#basics {
    border-radius: 30px 30px 0 0;
}


#basics img {
    width: 80%;
}

figcaption {
    font-weight: bold;
}

h1 {
    text-align: center;
}

#details,
#contact {
    font-size: 1.3rem;
}

input[type=submit] {
    background-color: rgb(215, 105, 26);
    font-family: space;
    color: rgb(77, 29, 2);
    font-size: 2rem;
    font-weight: bold;
    display: block;
    float: right;
    margin-left: 1rem;
    padding: 1rem 1rem;
    width: fit-content;
    border-radius: 12px;
}

.component {
    border-color: rgb(215, 105, 26);
    border-style: solid;
    padding: 1%;
    margin-bottom: 4rem;
    background-color: rgba(255, 228, 196, 0.2);
}

.cgu {
    font-family: galactic;
}

.component-title {
    background-color: rgb(215, 105, 26);
    font-family: space;
    color: rgb(77, 29, 2);
    font-size: 2rem;
    font-weight: bold;
    display: block;
    margin-top: -3rem;
    margin-left: 1rem;
    padding: 1rem 1rem;
    width: fit-content;
    border-radius: 12px;
}


.disclaimer {
    font-size: 0.8rem;
}

#more {
    border-radius: 0 0 30px 30px;
}

@media (min-width: 1400px) {
    #details {
        width: 56%;
        border-radius: 0 30px 0 0;
        float: right;
    }

    #basics {
        border-radius: 30px 0 0 0;
        width: 38.5%;
        margin: 0;
        float: left;
    }

    #cgu {
        height: auto;
    }

    .component {
        height: 30rem;
        margin-bottom: 0;
    }

    #details .component-title {
        margin-right: 1rem;
        float: right;
    }

    #more.component-title {
        margin-left: 10rem;
    }

    #more {
        margin-top: 4rem;
        height: 14rem;
        float: left;
    }
}