/*

font-family: 'Barlow', sans-serif;
font-family: 'Goudy Bookletter 1911', serif;
font-family: 'Karla', sans-serif;
font-family: 'Sorts Mill Goudy', serif;

*/

/*
    Variables declaration and default overrides
*/

html {
    --headfont: 'goudy bookletter 1911';
    --headfontsize: max(2vw,22pt);
    --textfont: 'barlow';
    --textfontsize: max(1.3vw,15pt);

    --dark: black;
    --verydark: rgb(39, 39, 39);
    --meddark: rgb(50, 50, 50);
    --light: white;

    --darktolight-h: linear-gradient(to right, var(--dark), var(--light));

    --green: rgb(162, 231, 185);
    --blue: rgb(189, 235, 250);
    --pink: rgb(250, 200, 234);
    --yellow: rgb(241, 238, 176);

    --lightgreen: rgb(185, 228, 199);
    --lightblue: rgb(215, 240, 248);
    --lightpink: rgb(246, 220, 238);
    --lightyellow: rgb(240, 238, 203); 

    --rainbow-h: linear-gradient(to right, var(--lightgreen), var(--lightblue), var(--lightpink), var(--lightyellow));
    --rainbowreverse-h: linear-gradient(to left, var(--lightgreen), var(--lightblue), var(--lightpink), var(--lightyellow));

    --transitiontime: 0.5s;

    --spacing: 5px;
}

h1, h2, h3, h4, h5, h6, p, li, ul {
    margin: 0;
    font-weight: normal;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr minmax(90%, 1500px) 1fr;
}

body {
    background: var(--meddark);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: underline;
    color: darkblue;
}

.headitem {
    color: var(--dark);
    padding: 0.8vw;
    font-size: var(--headfontsize);
    font-family: var(--headfont);
    text-align: center;
    border: hidden;
    text-decoration: none;
    vertical-align: center;
    transition: var(--transitiontime);
}

.headitem:hover {
    background-color: var(--dark);
    cursor: pointer;
}

.item {
    padding: 0.8vw;
    font-size: var(--headfontsize);
    font-family: var(--headfont);
    text-align: center;
    border: hidden;
}

/*
    Classes for background colours.
*/

.darkbackground {
    background-color: var(--dark);
}

.medbackground {
    background-color: var(--meddark);
}

.lightbackground {
    background-color: var(--light);
}

.greenbackground{
    background-color: var(--green);
}

.bluebackground{
    background-color: var(--blue);
}

.pinkbackground{
    background-color: var(--pink);
}

.yellowbackground{
    background-color: var(--yellow);
}

.lightgreenbackground {
    background-color: var(--lightgreen);
}

.lightbluebackground {
    background-color: var(--lightblue);
}

.lightpinkbackground {
    background-color: var(--lightpink);
}

.lightyellowbackground {
    background-color: var(--lightyellow);
}

.rainbow-h {
    background-image: linear-gradient(to right, var(--lightgreen), var(--lightblue), var(--lightpink), var(--lightyellow))
}

.greentoblue-h {
    background-image: linear-gradient(to right, var(--lightgreen), var(--lightblue));
}

.greentopink-h {
    background-image: linear-gradient(to right, var(--lightgreen), var(--lightpink));
}

.greentoyellow-h {
    background-image: linear-gradient(to right, var(--lightgreen), var(--lightyellow));
}

.greentolight-h {
    background-image: linear-gradient(to right, var(--lightgreen), var(--light));
}

.bluetogreen-h {
    background-image: linear-gradient(to right, var(--lightblue), var(--lightgreen));
}

.bluetopink-h {
    background-image: linear-gradient(to right, var(--lightblue), var(--lightpink));
}

.bluetoyellow-h {
    background-image: linear-gradient(to right, var(--lightblue), var(--lightyellow));
}

.bluetolight-h {
    background-image: linear-gradient(to right, var(--lightblue), var(--light));
}

.pinktogreen-h {
    background-image: linear-gradient(to right, var(--lightpink), var(--lightgreen));
}

.pinktoblue-h {
    background-image: linear-gradient(to right, var(--lightpink), var(--lightblue));
}

.pinktoyellow-h {
    background-image: linear-gradient(to right, var(--lightpink), var(--lightyellow));
}

.pinktolight-h {
    background-image: linear-gradient(to right, var(--lightpink), var(--light));
}

.yellowtogreen-h {
    background-image: linear-gradient(to right, var(--lightyellow), var(--lightgreen));
}

.yellowtoblue-h {
    background-image: linear-gradient(to right, var(--lightyellow), var(--lightblue));
}

.yellowtopink-h {
    background-image: linear-gradient(to right, var(--lightyellow), var(--lightpink));
}

.yellowtolight-h {
    background-image: linear-gradient(to right, var(--lightyellow), var(--light));
}

.lighttogreen-h {
    background-image: linear-gradient(to right, var(--light), var(--green));
}

.lighttoblue-h {
    background-image: linear-gradient(to right, var(--light), var(--lightblue));
}

.lighttopink-h {
    background-image: linear-gradient(to right, var(--light), var(--lightpink));
}

.lighttoyellow-h {
    background-image: linear-gradient(to right, var(--light), var(--lightyellow));
}

/*
    Classes for text colours.
*/

.darktext {
    color: var(--dark);
}

.lighttext {
    color: var(--light);
}

.greentext {
    color: var(--green)
}

.bluetext {
    color: var(--blue);
}

.pinktext {
    color: var(--pink);
}

.yellowtext {
    color: var(--yellow);
}

/*
    Classes for title menu hover effects.
*/

.name {
    transition: var(--transitiontime);
}

.name:hover {
    text-shadow: 0px 0px 0px var(--green), 5px 5px 0px var(--blue), 10px 10px 0px var(--pink), 15px 15px 0px var(--yellow);
    color: transparent;
}

.greentitle:hover {
    color: var(--green);
}

.bluetitle:hover {
    color: var(--blue);
}

.pinktitle:hover {
    color: var(--pink)
}

.yellowtitle:hover {
    color: var(--yellow);
}

/*
    Classes for font styling and sizing of items.
*/

h1, p {
    padding: 1vw;
}

h1 {
    font-family: var(--headfont);
    font-size: var(--headfontsize);
    vertical-align: center;
}

text, p {
    font-family: var(--textfont);
    font-size: var(--textfontsize);
    vertical-align: top;
}

.smalltext {
    font-size: var(--textfontsize);
}

.largetext {
    font-size: calc(var(--textfontsize)*1.5)
}

/*
    Classes for defining grid layouts.
    ALL grid items should be in the first list then a separate entry for layout specifics.
    The layouts here are for mobile layout. See below for expanding to tablet/desktop layout.

    THe margin class is used only on the outermost grid if there are nested grids.
    Inner grids when nested already have grid gap between its own element and the parent grid gap for spacing.
    header footer and .imagegallery have this built in as they shouldn't be nested.
*/

.margin,
header,
footer,
.imagegallery {
    margin: var(--spacing);
}

header,
footer,
.onecolumn,
.twocolumns,
.threecolumns,
.fourcolumns,
.imagegallery {
    display: grid;
    grid-gap: var(--spacing);
}

header {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

footer,
.onecolumn,
.twocolumns,
.threecolumns,
.fourcolumns {
    grid-template-columns: 1fr;
}

.imagegallery {
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    grid-gap: var(--spacing);
}

/*
    Classes for grid item sizing
*/

.span {
    grid-column: 1 / -1;
}

.span2h {
    grid-column: span 2;
}

.span2v {
    grid-row: span 2;
}

.span3h {
    grid-column: span 3;
}

.span3v {
    grid-row: span 3;
}

/*
    Classes for other items etc.
*/

button {
    border-style: solid;
    border-width: 2px;
    padding: 1vw;
    font-family: var(--textfont);
    font-size: var(--textfontsize);
    transition: 0.05s;
    font-weight: 600;
    background-color: var(--dark);
}

.greenbutton {
    border-color: var(--green);
    color: var(--green)
}
.greenbutton:hover {
    background-color: var(--green);
    color: var(--dark);
}
.bluebutton {
    border-color: var(--blue);
    color: var(--blue)
}
.bluebutton:hover {
    background-color: var(--blue);
    color: var(--dark);
}
.pinkbutton {
    border-color: var(--pink);
    color: var(--pink)
}
.pinkbutton:hover {
    background-color: var(--pink);
    color: var(--dark);
}
.yellowbutton {
    border-color: var(--yellow);
    color: var(--yellow)
}
.yellowbutton:hover {
    background-color: var(--yellow);
    color: var(--dark);
}

figure {
    padding: 0;
    margin: 0;
}

img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}   

iframe {
    object-fit: cover;
}

.soundcloud {
    font-size: var(--textfontsize);
}

.youtube {
    width: 100%;
    height: auto;
}

.youtube {
	padding-bottom: 56.25%;
    height: 0;
    position: relative;
	padding-top: 30px;
	overflow: hidden;
}
.youtube iframe, 
.youtube object, 
.youtube embed {
	position: absolute;
	left: 0;
    top: 0;
	width: 100%;
	height: 100%;
}



/*
    Classes for dropdowns and labels and inputs etc
*/

select {
    width: 80%;
    height: max(5vw,60px);
    font-family: 'Barlow';
    font-size: calc(var(--textfontsize)*1.2);
    border: none;
    border-radius: 0;
    border: var(--meddark);
    border-width: 3px;
    border-style: solid;
    margin: 1vw;
    padding: 0 15px;
    border-radius: 999px;
    background-color: var(--dark);
    color: var(--green);
    text-align-last: center;
}

select option:disabled {
    color: var(--pink);
    font-style: italic;
}

select option:checked {
    color: var(--blue)
}

label {
    font-size: var(--textfontsize);
    font-family: var(--textfont);
    margin: 1vw;
}
textarea {
    width: 80%;
    height: 100px;
    background-image: linear-gradient(var(--verydark),var(--verydark));
    resize: none;
    margin: 1vw;
    padding: 1vw;
    border: none;
    font-size: var(--textfontsize);
    font-family: var(--textfont);
    color: var(--light);
}

.textinput {
    width: 80%;
    background-image: linear-gradient(var(--verydark),var(--verydark));
    resize: none;
    margin: 1vw;
    padding: 1vw;
    border: none;
    font-size: var(--textfontsize);
    font-family: var(--textfont);
    color: inherit;
}

::placeholder {
    color: lightgrey;
}

@media only screen and (orientation: landscape) and (min-width: 700px) {

/*
    Classes for grid layouts greated than 700px wide and landscape orientation.
*/

header {
    grid-template-columns: repeat(5,2fr);
}

.name {
    grid-column: span 1;
}

.imagegallery {
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(auto-fill,250px);
    }

.twocolumns {
    grid-template-columns: 1fr 1fr;
}

.threecolumns {
    grid-template-columns: 1fr 1fr 1fr;
}

.fourcolumns {
    grid-template-columns: 1fr 1fr;
    /* --- Four columns allowed in media query below for over 1000px wide --- */
}

/*
    Classes for grid item positioning in tablet/desktop layout.
*/

.widespan {
    grid-column: 1 / -1;
}

.wspan2h {
    grid-column: span 2;
}

.wspan3h {
    grid-column: span 3;
}

.square {
    grid-area: span 2 / span 2;
}

.portrait {
    grid-area: span 3 / span 2;
}

.landscape {
    grid-area: span 2 / span 3;
}

.fullwidth {
    grid-area: span 3 / span 5;
}

.thinportrait {
    grid-area: span 2 / span 1;
}

.thinlandscape {
    grid-area: span 1 / span 2;
}

}

@media only screen and (min-width: 1200px) {

/*
    This is just to exapnd the fourcolumns grid to the full four columns.
*/

    .fourcolumns {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    
}