/*Tausta: 69,102,94
Laatikot: 75,126,113 ja 61,80,75
Teksti: 246,252,250
Korostus: 102,69,76 tai 126,75,86
*/
#contentWrapper{
    width: 100%;
    display: flex;
    width: 80%;
    margin: auto;
}
.contentHeader{
    background-color: rgb(61,80,75);
    border-radius: 15px;
    padding: 10px;
    color: rgb(246,252,250); 
}
.contentBoxes{
    display: flex;
    flex-flow: column wrap;
    border-radius:15px;
    margin: 1%;
    background-color: rgb(75,126,113);  
    padding: 1%;
}
.sideBar{
    min-width: 200px;
}
.sideBar a{
    color: rgb(246,252,250);
    font-size: 20px;
}
.sideBar a:hover{
    color: rgb(126,75,86);
    text-decoration: none;
}
.descriptionWrapper{
    width: 100%;
    display: flex;
}
.descriptionBoxes{
    margin: 1%;
}

#team{
    width: 30%;
}
#description{
    display: flex;
    flex-flow: column;
    width: 100%;
}
#description iframe{
    align-self: center;
    width: 60%;
    height: 315px;
}
.media{
    padding-left: 40px;
    margin: auto;
    display: flex;
    flex-flow: row;  
}
.media iframe{
    width: 448px;
    height: 252px;
}
.media .theme{
    margin: auto -200px;
}

.theme{
    width: 100%;
    display: flex;
    margin: auto;
}
.themeImage{
    width: 100%;
}
.tasks{
    display: flex;
    flex-flow: row wrap;
    margin: 5% 0;
}
.slides{
    display: flex;
    flex-flow: column;
    margin: auto;
    width: 50%;
}
.slides img {
    width: 100%;
}
.slides iframe{
    align-self: center;
}
.taskDescription{
    width: 48%;
    margin-right: 2%;
}
.taskVideo{
    width: 48%;
        display: flex;
        flex-flow: column;
    }
    .tasks iframe{
        width: 100%;
        height: 220px;
        margin: auto;
    }
h1{
    font-family: "Indie Flower";
    font-size: 60px;
}
.author h2{
    font-size: 36px;
    margin: 15px;
    }
h2{
    color: rgb(246,252,250);
    font-size: 36px;
    margin-bottom: 0;
}
h3{
    color: rgb(246,252,250);
    font-size: 28px;
}
p{
    font-size: 24px;
    color: rgb(246,252,250); 
}
a{
    font-size: 24px;
    color: rgb(126,75,86);
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
li{
    color: rgb(246,252,250);
    font-size: 24px;
    padding-bottom: 10px;
}
.sideBar h3{
        font-size: 24px;
    }
    .sideBar li{
        font-size: 20px;
    }
    .sideBar a{
        font-size: 20px;
    }

/* Slideshows */
.mySlides {
    display: none;
}
.slideshow-container {
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: rgb(246,252,250);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot2 {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: rgb(246,252,250);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot3 {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: rgb(246,252,250);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: rgb(176,182,180);
}

/*Muotoilut kännykän näytölle*/
@media only screen and (max-width: 600px){
    #contentWrapper{
    width: 90%;
}
    .descriptionWrapper{
        flex-flow: column;
    }
    #team{
        width: 100%;
        display: flex;
        flex-flow: column;
        margin: 0;
    }
    #team img{
        margin: auto;
    }
    h1{
        font-size: 34px;
    }
    h2{
        font-size: 24px;
    }
    h3{
        font-size: 20px;
    }
    p{
        font-size: 16px;
    }
    li{
        font-size: 16px;
    }
    a{
        font-size: 16px;
    }
}
/*Muotoilut tabletin näytölle*/
@media only screen and (max-width: 950px){
    #contentWrapper{
    width: 90%;
}
    #headerWrapper{
    position: static;
    width: 100%;
}
    .sideBar{
        display: none !important;
    }
    #description{
        width: 100%;
    }
    #description iframe{
        width: 60%;
        height: auto;
    }
    .media{
        display: flex;
        flex-flow: column;
    }
    .media .theme{
        margin: auto;
        padding-top: 10px;
    }
}
@media only screen and (min-width: 601px) and (max-width: 950px){ 
    h1{
        font-size: 34px;
    }
    h2{
        font-size: 24px;
    }
    .author h2{
        margin: 15px;
    }
    h3{
        font-size: 20px;
    }
    p{
        font-size: 18px;
    }
    li{
        font-size: 18px;
    }
    a{
        font-size: 18px;
    }
    #description iframe{
    height: 215px;
    }
}
/*Muotoilut näytölle*/
@media only screen and (max-width: 1250px) {
    .theme{
        width: 100%;
        display: flex;
        flex-flow: column;
    }
    .theme img{
        width: 50%;
    }
    .theme .slides2 img{
        width: 85%;
        padding-left: 8%;
    }
    #description iframe{
        width: 60%;
        height: 220px;
    }
    .tasks{
        display: flex;
        flex-flow: column;
    }
    .taskDescription{
        width: 100%;
        margin: auto;
    }
    .taskVideo{
        width: 100%;
        display: flex;
        flex-flow: column;
    }
    .tasks iframe{
        width: 50%;
        height: 200px;
        margin: auto;
    }
    .slides{
        width: 100%;
        height: auto;
    }
    h1{
        font-size: 34px;
    }
    h2{
        font-size: 24px;
    }
    h3{
        font-size: 20px;
    }
    p{
        font-size: 16px;
    }
    li{
        font-size: 16px;
    }
    a{
        font-size: 16px;
    }
}
/*Muotoilut leveälle näytölle*/
@media only screen and (min-width: 1920px) and (max-width: 2219px){
    .media{
        width: 90%;
    }
    .themeImage{
        width: 90%;
    }
}
@media only screen and (min-width: 2220px) and (max-width: 2519px){
    .media{
        width: 80%;
    }
    .themeImage{
        width: 90%;
    }
}
@media only screen and (min-width: 2520px) and (max-width: 2819px){
    .media{
        width: 70%;
    }
    .themeImage{
        width: 80%;
    }
}
@media only screen and (min-width: 2820px) and (max-width: 3119px){
    .media{
        width: 60%;
    }
    .themeImage{
        width: 70%;
    }
}
@media only screen and (min-width: 3120px){
    .media{
        width: 50%;
    }
    .themeImage{
        width: 70%;
    }
}