body {
    margin: 0;
    padding: 0;
    background-image: url('./images/trippy.gif'); 
    background-size: cover;
    font-family: Arial;
}



/* Header section with title and banner */

header {
    display:flex;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    align-items: center;
}

img {
    height: auto;
    width: 100%;
}

.scrollbar {

    padding-left: 1rem;
    padding-right: 1rem;
    flex-shrink: 0.5;
}

h1 {

    font-family: "Bokor", cursive; 
    font-weight: 400;
    font-style: normal;
    -webkit-text-stroke-width: .5px; 
    -webkit-text-stroke-color: rgb(255, 255, 255);
    color: rgb(58, 72, 144);
    font-size: 40px;
    text-align: center;
    white-space: nowrap;
}

/* Button styles*/

.inprint {

	background:linear-gradient(to bottom, #e243f0 5%, #7e0dbf 100%);
	background-color:#e243f0;
	border-radius:15px;
	border:1px solid #b844b8;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-family: "serif";
    font-style: italic;
	font-size:16px;
	padding:1px 25px;
	text-decoration:none;
}
.inprint:hover {
	background:linear-gradient(to bottom, #7e0dbf 5%, #e243f0 100%);
	background-color:#7e0dbf;
}
.inprint:active {
	position:relative;
	top:1px;
}


.online {
	
	background:linear-gradient(to bottom, #e243f0 5%, #7e0dbf 100%);
	background-color:#e243f0;
	border-radius:15px;
	border:1px solid #b844b8;
	display:inline-block;
	cursor:pointer;
	color: white;
	font-family: "serif";
    font-style: italic;
	font-size:16px;
	padding:1px 25px;
	text-decoration:none;
}
.online:hover {
	background:linear-gradient(to bottom, #7e0dbf 5%, #e243f0 100%);
	background-color:#7e0dbf;
}
.online:active {
	position:relative;
	top:1px;
}

.viaemail {
	
	background:linear-gradient(to bottom, #e243f0 5%, #7e0dbf 100%);
	background-color:#e243f0;
	border-radius:15px;
	border:1px solid #b844b8;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-family: "serif";
    font-style: italic;
	font-size:16px;
	padding:1px 25px;
	text-decoration:none;
}
.viaemail:hover {
	background:linear-gradient(to bottom, #7e0dbf 5%, #e243f0 100%);
	background-color:#7e0dbf;
}
.viaemail:active {
	position:relative;
	top:1px;
}

.aboutherself {
	
	background:linear-gradient(to bottom, #e243f0 5%, #7e0dbf 100%);
	background-color:#e243f0;
	border-radius:15px;
	border:1px solid #b844b8;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-family: "serif";
    font-style: italic;
	font-size:16px;
	padding:1px 25px;
	text-decoration:none;
}
.aboutherself:hover {
	background:linear-gradient(to bottom, #7e0dbf 5%, #e243f0 100%);
	background-color:#7e0dbf;
}
.aboutherself:active {
	position:relative;
	top:1px;
}


.insecret {
	
	background:linear-gradient(to bottom, #e243f0 5%, #7e0dbf 100%);
	background-color:#e243f0;
	border-radius:15px;
	border:1px solid #b844b8;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-family: "serif";
    font-style: italic;
	font-size:16px;
	padding:1px 25px;
	text-decoration:none;
}
.insecret:hover {
	background:linear-gradient(to bottom, #7e0dbf 5%, #e243f0 100%);
	background-color:#7e0dbf;
}
.insecret:active {
	position:relative;
	top:1px;
}
        


/* Menu with links */

.menubox {

    margin: 0 auto;
    width: 50%;
}

.menuitem {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menuicon {
    width: 1.5rem;
    height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Resizing for tablet */

@media only screen and (max-width:800px)   {
    h1 {
		font-size: 30px;
	}

}

@media only screen and (max-width:800px)   {
    .menubox {
		width: 40%;
	}

}


@media only screen and (max-width:800px)   {
    .inprint {
		font-size: 14px;
		padding: 0.5px 20px;
		text-align: center;
    	white-space: nowrap;
	}

}
@media only screen and (max-width:800px)   {
    .online {
		font-size: 14px;
		padding: 0.5px 20px;
		text-align: center;
    	white-space: nowrap;
	}

}
@media only screen and (max-width:800px)   {
    .viaemail {
		font-size: 14px;
		padding: 0.5px 20px;
		text-align: center;
    	white-space: nowrap;
	}

}
@media only screen and (max-width:800px)   {
    .aboutherself {
		font-size: 14px;
		padding: 0.5px 20px;
		text-align: center;
    	white-space: nowrap;
	}

}
@media only screen and (max-width:800px)   {
    .insecret {
		font-size: 14px;
		padding: 0.5px 20px;
		text-align: center;
    	white-space: nowrap;
	}

}

/* Resizing for phone */

@media only screen and (max-width:400px)   {
    h1 {
		font-size: 20px;
	}

}

@media only screen and (max-width:400px)   {
    .menubox {
		width: 35%;
	}

}

@media only screen and (max-width:400px)   {
    .inprint {
		font-size: 10px;
		padding: 0.25px 10px;
	}

}
@media only screen and (max-width:400px)   {
    .online {
		font-size: 10px;
		padding: 0.25px 10px;
	}

}
@media only screen and (max-width:400px)   {
    .viaemail {
		font-size: 10px;
		padding: 0.25px 10px;
	}

}
@media only screen and (max-width:400px)   {
    .aboutherself {
		font-size: 10px;
		padding: 0.25px 10px;
	}

}
@media only screen and (max-width:400px)   {
    .insecret {
		font-size: 10px;
		padding: 0.25px 10px;
	}

}