* {
box-sizing: border-box;
}

/* Taulukko */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
padding: 15px;
}

th {
text-align: left;
}

/* Style the body */
body {
    font-family: Arial;
    margin: 0;
}

/* Header/logo Title */
.header {
    padding: 15px;
    text-align: left;
    background: white;
    color: black;
}

/* Style the header links */
.header a {
    color: black;
    text-decoration: none;
}

/* Change color on hover */
.header a:hover {
    color: #ddd;
}

/* Style the top navigation bar */
.navbar {
    position: sticky;
    top: 0;
    display: flex;
    background-color: #333;
    background: linear-gradient(grey, black, grey);
}

/* Style the navigation bar links */
.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

/* Change color on hover */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 30%;
    background-color: white;
    padding: 20px;
}

.sidenav {
width: 100%;
z-index: 1;
top: 0;
left: 0;
background-color: none;
overflow-x: hidden;
} 

.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 0px; /*0 oli ennen 16*/
text-decoration: none;
font-size: 15px;
color: black;
display: block;
border: none;
background: none;
text-align: left;
cursor: pointer;
outline: none;
}

.sidenav a:hover, .dropdown-btn:hover {
color: grey;
}

.dropdown-container {
display: none;
background-color: none;
padding-left: 12px;
}

.fa-caret-down {
float: right;
padding-left: 2px;
padding-right: 2px;
}

.fa-caret-up {
padding-left: 8px;
padding-right: 8px;
}

/* Main column */
.main {
    flex: 70%;
    background-color: white;
    padding: 20px;
    margin-bottom: 40px;
}

/* Teoriaruutu kapea 50 %*/
.teoria {
    background-color: LightSkyBlue;
    padding-top: 1px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    width: 50%;
}

/* Teoriaruutu leveä 80 %*/
.teoria2 {
    background-color: LightSkyBlue;
    padding-top: 1px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    width: 80%;
}

/* Teoriaruutu leveys 66 %*/
.teoria1 {
    background-color: #F0FFFF;
    padding-top: 1px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    width: 66%;
}


/* Teoriaruudun otsikkorivi leveys 66 %*/
.theorem {
    background-color: #CCFFFF;
    padding-top: 1px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 1px;
    margin-bottom: -5px;
    width: 66%;
}

/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0px;
    padding: 1px;
    width: 100%;
    text-align: center;
    background: white;
    border-top: solid 1.5px black;
    box-shadow: 0px -3px 6px grey;
}

/* Responsive layout - when the screen is less than 1000px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
    .row, .navbar {   
        flex-direction: column;
    }
}

/* Kuvat */
img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.nappi {
  position: fixed; /* Fixed/sticky position */
  bottom: 70px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
}

.button {
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 7px 0px; /* Some padding */
  border-radius: 30px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  box-shadow: 3px 3px 3px grey;
}

.button a{
  text-decoration: none;
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 7px 4px; /* Some padding */
  border-radius: 30px; /* Rounded corners */
  font-size: 15px; /* Increase font size */
}

.button a:hover {
  background-color: #ddd; /* Add a dark-grey background on hover */
}

<!--
/* Simulaatiot */
iframe {
    width: 800px;
    height: 600px;
}


@media screen and (max-width: 1000px) {
iframe {
    width: 100%;
    max-width: 300px;
    height: auto;
    }
}
-->