@font-face {
    font-family: charm;
    src: url("../fonts/Charm-Bold.ttf");

}

:root {}

body {

    margin: 0;
    font-family: Arial;
}

nav {

    border-bottom: 1px black solid;

}

h1 {

    text-align: center;
    font-size: 3em;

}

#container {

    display: flex;
    flex-direction: column;
    align-items: center;
	width: clamp(200px, 960px, 95vw);
    margin: 40px auto 40px auto;


}

#buttons-container {
    display: flex;
    justify-content: center;
    align-self: stretch;
    margin-bottom: 20px;

}

#button-info {

    text-align: center;
    flex-grow: 1;

}

#button-video {

    text-align: center;
    flex-grow: 1;

}


#button-sum {

    text-align: center;
    flex-grow: 1;


}


#info {

    display: none;
    align-self: stretch;

}

#video {

    display: none;
    align-self: stretch;

}


#sum {

    display: none;
    align-self: stretch;

}

.menu {

    border-radius: 5px;
    background-color: rgb(66, 133, 244);
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s linear, transform 0.2s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    height: 50px;
    max-width: 320px;
}

.menu:first-child {
    margin: 0;

}

.menu:hover {

    transform: scale(1.05);
    box-shadow: 4px 10px 20px 5px rgba(0, 0, 0, 0.25);

}

.video_subject {

    display: inline-block;
    border: 0.1em solid rgb(180, 180, 180);
    margin-bottom: 1em;
    width: 100%;
    color: black;
    border-radius: 0.15em;
    text-decoration: none;


}

.video_subject > * {

    padding-right: 1%;

}

.video_subject > h2 {

    border-bottom: 0.1em rgb(180, 180, 180) solid;
    margin: 0;
    background-color: rgb(180, 180, 180);
}



@media (max-width:600px) {}