* {
    padding: 0;
    margin: 0;
    font-family: "Chivo", sans-serif;
}
html,
body {
    color: rgb(59, 59, 59);
    background-color: rgb(255, 255, 255);
    height: 100%;
}
a, a:visited {
    color: rgb(59, 59, 59);
    text-decoration: none;
}

/* Header */
header {
    padding:15px 0;
    background-color: #12638f;
    text-align: center;
}
header a img {
    width: 148px;
    height: 41px;
}

/* Sidinnehållet */
.content {
    min-height: 80%;
    min-height:calc(100% - 200px);
}

/* Informationstext */
.message {
    padding: 100px 20px;
    text-align: center;
}
.message h1 {
    margin-bottom: 10px;
}
.message p {
    font-style: italic;
    margin-bottom: 20px;
}
.message i {
    font-size: 50px;
}

/* Webbläsar-puffar */
.browser {
    box-sizing: border-box;
    float: left;
    width: 25%;
    margin: 0;
    min-height: 300px;
    background-color: rgb(49, 49, 49);
    padding-top: 100px;
    transition: all .4s;
}
.browser:hover {
    background-color: rgb(41, 41, 41);
    cursor: pointer;
}
.browser:hover > .browser-content i {
    font-size:60px;
    transition: all .4s;
}
.browser:hover > .browser-content h2 {
    font-size:20px;
    transition: all .4s;
}
.browser:hover {
    padding-top:88px;
    transition: all .4s;
}
/* Små skärmar (800 px eller mindre) */
.small-screen .browser {
    width: 50%;
}

/* Besökarens webbläsare */
#user-browser {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    padding-top: 100px;
    min-height: 300px;
}
/* Utseendet på webbläsarpuffarna */
.chrome {
    background-color: #ecb94b;
}
.chrome:hover {
    background-color: #e6bc61;
}
.firefox {
    background-color: #eb9525;
}
.firefox:hover {
    background-color: #eb9f3c;
}
.edge {
    background-color: #08da78;
}
.edge:hover {
    background-color: #40f098;
}
.safari {
    background-color: #13a4e2;
}
.safari:hover {
    background-color: #39b5eb;
}
.opera {
    background-color: #e05245;
}
.opera:hover {
    background-color: #ec6d62;
}
/* Innehållet i puffarna*/
.browser-content {
    text-align: center;
}
.browser h2,
.user-browser h2 {
    margin-top: 20px;
    font-size: 18px;
    color: rgb(255, 255, 255);
}
/* Ikoner */
.browser i,
.user-browser i {
    font-size: 50px;
    color: rgb(255, 255, 255);
}

/* Tar bort float */
#browser-section:after {
    clear: both;
    content: "";
    display: block;
}

/* Sidfot */
#main-footer {
    padding: 50px 10px;
    text-align: center;
    background-color: #12638f;
}
#main-footer p,
#main-footer a{
    color: rgb(255, 255, 255);
    font-size: 14px;
    text-decoration: none;
    padding:5px 0;
}
@media all and (max-width: 350px) {
	#main-footer p span{
		width: 100%;
		display: inline-block;
	}
}
#main-footer i {
    margin-right:5px;
    margin-left:10px;
}
#main-footer a img {
    width: 148px;
    height: 41px;
}

/* För besökare med uppdaterad webbläsare */
#domain-link {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 100px 15%;
}
#domain-link h1 {
    margin-bottom: 20px;
}
#domain-link i {
    font-size: 200px;
    color: #12638f;
    margin: 20px;
}
#domain-link a {
    display: block;
    text-decoration: none;
    color: rgb(231, 122, 33);
    font-weight: bold;
    font-size: 20px;
}

/* Debug-rutan */
#debug-box {
    padding: 50px;
    margin: 50px;
    background-color: rgb(255, 255, 255);
    color: rgb(17, 17, 17);
    border-radius: 10px;
}
#debug-box h2 {
    margin-bottom: 20px;
    font-size: 26px;
}
#debug-box .lead-text {
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}