* {
margin: 0;
}
* {
box-sizing: border-box;
}

/*font size for text undet 900px*/
body{
font-size: 20px;
}

/*font size for text over 900px*/
@media (min-width: 900px){
body {
font-size: 35px;
}
}

/*font family for the subtitle*/
h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*background color*/
.background {
background-color: #d2f4e1;
}

/*background color for the title*/
.title {
background-color: #4b4848;
width: 100%;
border: 5px solid #00ff19;
}

/*upper title (Fortnite Tips) */
.titletop {
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-style: bold;
text-align: center;
text-decoration: underline;
margin-bottom: 1px;
font-size: 300%;
}

/*lower title (by Luca Bisanti)*/
.titlebot {
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
text-align: center;
margin-top: 1px;
font-size: 200%;
}

/*settings for the columns*/
[class*="col-"] {
width: 100%;
float: left;
}
.row {
display: flex;
}

/*column to the left for the navigationbox/table of contents*/
.col-1 {
width: 5%;
background-color: #4b4848;
border: 5px solid #00ff19;
padding-left: 28px;
text-align: top;
color: white;
}

/*open navigationbox/table of contents on hover*/
.col-1:hover{
text-align: left;
padding-left: 28px;
width: 40%;
}

/*column to the right for the maintext*/
.col-2 {
width: 95%;
}

/*visibility for the navigationbox/table of contents text on the left*/
.navigationbox {
visibility: hidden;
}
.col-1:hover .navigationbox {
visibility: visible;
}
.building {
visibility: hidden;
}
.col-1:hover .building{
visibility: visible;
}
.zone {
visibility: hidden;
}
.col-1:hover .zone {
visibility: visible;
}
.rotation {
visibility: hidden;
}
.col-1:hover .rotation {
visibility: visible;
}
.competitive {
visibility: hidden;
}
.col-1:hover .competitive {
visibility: visible;
}

/* Size for all images*/
img {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}