html, body {
	overflow: hidden;
	background: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-VariableFont_wght.ttf');
}  


a, a:focus { color: rgb(59, 59, 59);; text-decoration: none; transition: 0.2s ease; }
a:hover {text-decoration: none; color: #e0e0e0;}

h1, h2 {
	margin-top: 10px;
	font-family: 'Montserrat';
	font-size: 38px;
    font-weight: 300;
    color: #555;
    line-height: 50px;
}

h3 {
	font-family: 'Montserrat';
	font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;
}


.ccc-content {
    margin-top: 80px;
    padding-bottom: 80px;
    color: #fff;
}

.wrapper {
	width: 100%;
	height: 100%;	
}

.content {
	position: relative;
	width: 100%;
	height: 100%;
}

.info-r {
	width: 200px;

}
.info-r > h2 {
    /*text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.54);*/
    color: #3b3b3b;
    line-height: 28px;
}
.social-icons {
    width: 150px;
    padding: 1%;
}
.social-icons a:nth-child(n+2) {
    padding-left: 5px !important;
}

img { max-width: 100%; }

.medium-paragraph {
	font-size: 17px;
	line-height: 32px;
}

.colored-text { color: #9b59b6; }

::-moz-selection { background: #9b59b6; color: #fff; text-shadow: none; }
::selection { background: #9b59b6; color: #fff; text-shadow: none; }

.layout {
	display: grid;
	grid:
	  ". . . . . . . . . . . ." 1fr
	  ". . . . . . . . . . . ." 1fr
	  ". . . tom-r tom-r tom-r tom-r tom-r . . . ." 1fr
	  ". . . . . . . . . . . ." 1fr
	  / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 8px;
  }
  
  .tom-r { grid-area: tom-r; }